<nav id ="navbar" th:fragment="navbar" class="navbar navbar-default ">
    <div class="pb-container">
        <div class="navbar-header" style="display: flex; align-items: center;width: 100%;">
            <!-- Logo -->
<!--            <a class="logo-a" th:href="@{/}">-->
<!--                <img th:src="${SITE_CONFIG['SITE_LOGO'] ?: '/img/pb-cms-logo.png'}" alt="logo" />-->
<!--            </a>-->
            <!-- 搜索框 -->
            <form id="searchForm" method="get" action="/blog/content" style="width: 100%">
                <div style="display: flex; align-items: center; margin: 0 10px;">
                    <input type="text" class="form-control" id="searchInput" name="keyword" style="flex: 1;" placeholder="请输入关键词">
                    <!-- 搜索按钮 -->
                    <button type="submit" class="btn btn-default" id="searchButton">
                        <span class="glyphicon glyphicon-search"></span>
                    </button>
                </div>
            </form>
            <!-- 导航按钮 -->
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>

        <div class="collapse navbar-collapse navbar-right" aria-expanded="false">
            <ul class="nav navbar-nav">
                <li th:class="${categoryId=='index' ? 'active' : ''} ">
                    <a th:href="@{/}">
                        首页
                    </a>
                </li>
                <li th:each="category:${CATEGORY_LIST}" th:class="${category.id==categoryId ? 'active':(#lists.isEmpty(category.children)?'':'dropdown')}">
                    <a th:if="${category.pid==null||category.pid==0}" th:href="@{${not #lists.isEmpty(category.children)? '#': ('/blog/category/' + category.id)}}" th:class="${#lists.isEmpty(category.children)?'':'dropdown-toggle'}" th:data-toggle="${#lists.isEmpty(category.children)?'':'dropdown'}">
                        <span th:text="${category.name}"></span>
                        <b th:if="${not #lists.isEmpty(category.children)}" class="caret"></b>
                    </a>
                    <ul th:if="${not #lists.isEmpty(category.children)}" class="dropdown-menu">
                        <li th:each="node:${category.children}"><a th:href="@{${'/blog/category/' + node.id}}" th:text="${node.name}"></a></li>
                    </ul>

                </li>
<!--                <li class="">-->
<!--                    <a th:href="@{/blog/comment}" th:class="${categoryId=='comment' ? 'active' : ''} ">-->
<!--                        留言板-->
<!--                    </a>-->
<!--                </li>-->
<!--                <li>-->
<!--                    <a href="#" onclick="alert('敬请期待')">-->
<!--                        <i  class="fa fa-search search-btn"></i>-->
<!--                    </a>-->
<!--                </li>-->
            </ul>
        </div>
    </div>
</nav>
